<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="20">
        <el-col :span="14"><div class="grid-content bg-purple" />
          <!-- 机构概述模块 -->
          <el-card class="box-card">
            <p>机构概述</p>
            <div class="text item content">
              <div class="left-content">
                <div class="name">西三旗分拣中心</div>
                <div class="address">地址:北京顺义区天澜综合保税区123号</div>
                <div class="duty-people">负责人：赵五金 16712345678</div>
                <el-button type="primary" plain>查看营业部分布</el-button>
              </div>
              <div class="right-content">
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
                <div class="item">
                  <div>
                    <div class="label">分拣中心(个)</div>
                    <div class="num">1</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <!-- 待办任务模块 -->
          <el-card class="box-card">
            <div class="header">
              <p>待办任务
                <img class="tooltip" src="" alt="">
              </p>
              <div>
                <el-button class="time" style="float: right; padding: 3px 0" type="text">2023-08-04 20:42</el-button>
              </div>
            </div>
            <div class="ball-chart-box" style="position: relative; width: 653px; height: 208px;">
              <div class="myChart">123</div>
              <div class="myChart">123</div>
              <div class="myChart">123</div>
              <div class="myChart">123</div>
            </div>
            <div class="bottom-label">
              <div class="item">
                <span class="label">待取件</span>
                <span class="num1">39</span>
              </div>
              <div class="item">
                <span class="label">待取件</span>
                <span class="num2">39</span>
              </div>
              <div class="item">
                <span class="label">待取件</span>
                <span class="num3">39</span>
              </div>
              <div class="item">
                <span class="label">待取件</span>
                <span class="num4">39</span>
              </div>
            </div>
          </el-card>

        </el-col>
        <el-col :span="10"><div class="grid-content bg-purple" />
          <!-- 今日数据模块 -->
          <el-card class="box-card right-info">
            <div class="header">
              <p>今日数据</p>
              <div>
                <el-button class="time" style="float: right; padding: 3px 0" type="text">2023-08-04 20:42</el-button>
              </div>
            </div>
            <div class="text item row-bg">
              <el-col :span="8" class="el-col">
                <div class="label"> 订单金额(元)</div>
                <div id="my-number1" class="value">2,284</div>
                <div class="bottom">较昨日 +342</div>
              </el-col>
              <el-col :span="8" class="el-col">
                <div class="label"> 订单金额(元)</div>
                <div id="my-number1" class="value">2,284</div>
                <div class="bottom">较昨日 +342</div>
              </el-col>
              <el-col :span="8" class="el-col">
                <div class="label"> 订单金额(元)</div>
                <div id="my-number1" class="value">2,284</div>
                <div class="bottom">较昨日 +342</div>
              </el-col>
            </div>
          </el-card>
          <!-- 执行任务模块 -->
          <el-card class="box-card tasking">
            <div class="header">
              <p>执行任务
                <img class="tooltip" src="" alt="">
              </p>
              <div>
                <el-button class="time" style="float: right; padding: 3px 0" type="text">2023-08-04 20:42</el-button>
              </div>
            </div>
            <div class="ball-chart-box" style="position: relative;  height: 208px;">
              <div class="myChart" />
              <div class="myChart" />
            </div>
            <div class="bottom-label">
              <div class="item">
                <span class="label">运输中</span>
                <span class="num1">39</span>
              </div>
              <div class="item">
                <span class="label">派送中</span>
                <span class="num2">39</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <!-- 常用功能模块 -->
        <el-col :span="24"><div class="grid-content bg-purple-dark" />
          <el-card class="box-card">
            <p class="Commonfunctions">常用功能</p>
            <div class="useFeaturelist">
              <div v-for="o in 6" :key="o" class="item">
                <img src="" alt="">
                <p>快递作业</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple" />
          <!-- 线路管理模块 -->
          <el-card class="box-card">
            <p class="LineManagement">线路管理</p>
            <div id="map" style="height:300px" />
          </el-card>
          <!-- 订单总量模块 -->
          <el-card class="box-card">
            <div class="header">
              <p class="Totalorders">订单总量</p>
              <div class="Totalorderstime">2023-02 - 2023-07</div>
            </div>
            <p class="Totalorderstype">单位: 笔</p>
            <div class="order-static">
              <div class="item">
                <div id="my-number4" class="num">85</div>
                <div class="label">订单最高值</div>
              </div>
              <div class="item">
                <div id="my-number4" class="num">85</div>
                <div class="label">订单最高值</div>
              </div>
              <div class="item">
                <div id="my-number4" class="num">85</div>
                <div class="label">订单最高值</div>
              </div>
            </div>
            <div id="order-account-chart" style="height:400px;">123</div>

          </el-card>

        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple" />
          <!-- 运输任务模块 -->
          <el-card class="box-card transport-task">
            <div class="header">
              <p>运输任务</p>
              <div class="search-more">查看更多</div>
            </div>
            <div class="text item">
              <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180"
                />
                <el-table-column
                  prop="address"
                  label="地址"
                />
              </el-table>

            </div>
          </el-card>
          <!-- 订单分布模块 -->
          <el-card class="box-card">
            <div class="header">
              <p class="Orderdistribution">订单分布</p>
              <div class="Orderdistributiontime">2023-02 - 2023-07</div>
            </div>
            <p class="Orderdistributiontype">单位: 笔</p>
            <div id="order-distribute-chart" style=" height: 480px;;">123</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
// import 'echarts/lib/chart/liquidFill'
import '../../../node_modules/echarts-liquidfill/dist/echarts-liquidfill.js'
import { mapGetters } from 'vuex'
import './china.js'
export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
    // 水球图
    // 基于准备好的 DOM，初始化 Echarts 实例
    const res = document.querySelectorAll('.myChart')
    console.log(res)
    // var myChart = echarts.init(document.getElementById('myChart'))
    // console.log(myChart)
    // 数据和颜色配置
    const data = [0.42, 0.31, 0.30, 0.41, 0.42, 0.31]
    const colors = ['#da5f41', '#f8c45c', '#f69c41', '#eade81', '#da5f41', '#f8c45c']
    const bgcColors = ['#fce5e0', '#fdf1d9', '#fdead7', '#f9fadd', '#fce5e0', '#fdf1d9']
    res.forEach((item, index) => {
      const myChart = echarts.init(item)
      var option = {
        series: [
          {
            type: 'liquidFill',
            color: [colors[index]],
            data: [data[index]],
            radius: '60%',
            outline: {
              itemStyle: {
                borderWidth: 1,
                borderColor: colors[index]
              }
            },
            backgroundStyle: {
              color: bgcColors[index]
            },
            itemStyle: {
              opacity: 0.95,
              shadowColor: 'rgba(0, 0, 0, 0)'
            },
            label: {

              formatter: function(param) {
                return ' {b|' + Number(param.value) * 100 + '}{c|  %}'
              },
              textStyle: {

                rich: {

                  b: {
                    color: '#000',
                    fontSize: 14
                  },
                  c: {
                    color: '#000',
                    fontSize: 14
                  }
                }
              },

              fontSize: 28,
              fontWeight: 700,
              fontFamily: 'SourceHanSansCN'
            }
          }
        ]
      }
      // 使用配置选项渲染图表
      myChart.setOption(option)
    })
    // 折线
    const ree = document.querySelector('#order-account-chart')
    console.log(ree)
    const res2 = echarts.init(document.querySelector('#order-account-chart'))

    const list = [
      { name: '1月', value: 85 },
      { name: '2月', value: 8 },
      { name: '3月', value: 54 }
    ]

    const data1 = []

    list.forEach((item) => {
      data1.push([item.name, item.value])
    })

    // 如果是折线图，此处需要追加实际数据的最后一组数据，如果是柱状图，则不需要。

    const labels = list.map((m) => {
      return m.name
    })

    var options = {
      backgroundColor: '#fff',
      title: {
        text: '温度',
        left: '8%',
        top: '0%',
        textStyle: {
          fontSize: 20,
          color: '#000',
          fontWeight: 'lighter'
        },
        subtextStyle: {
          fontSize: 20
        },
        textAlign: 'right'
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(255,255,255,0.8)',
        axisPointer: {
          label: {
            show: false,
            backgroundColor: '#0b1f56',
            color: '#fff',
            fontSize: 14
          },
          lineStyle: {
            width: 2,
            type: 'dashed',
            color: 'rgba(230, 247, 255, 0.20)' // 设置垂直x轴线的颜色
          }
        }
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLabel: {
          margin: 15, // x轴距离文字距离,
          textStyle: {
            fontFamily: 'Noto Sans SC',
            // color: '#D3D9E2',
            // fontWeight: 400,
            fontSize: 12
          }
        },
        axisTick: {
          'show': false // 隐藏x轴刻度
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (val, key) => {
            if (key % 2 === 0) {
              return val
            }
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#43B7C4',
            opacity: 0.25
          }
        }
      },
      series: [
        {
          name: 'Data1',
          type: 'line',
          showSymbol: true,
          data: data1,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            color: '#da5f41'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: '#fbe6e1'
              },
              {
                offset: 0,
                color: '#fff'
              }
            ])
          },
          lineStyle: {
            width: 1,
            color: '#e25433'
          }
        }

      ]
    }
    res2.setOption(options)
    // 柱状图
    function formatSpan(text, color) {
      return '<span style="color:' + color + '">' + text + '</span>'
    }
    const str = echarts.init(document.querySelector('#order-distribute-chart'))
    var optionss = {
      color: ['#e15536'],
      title: {
        text: '各省数据合格率统计'
        // textStyle: {
        //    color: '#fff'
        // }
      },
      tooltip: {
        backgroundColor: '#fff',
        trigger: 'axis',
        textStyle: {
          color: '#9497a1'
        },
        axisPointer: {
          type: 'line'
        },
        // formatter: "省份: {b} <br> 订单总量: {c}笔"
        formatter: function(params) {
          var province = params[0].name
          var orderCount = params[0].data
          return '省份:&emsp;&nbsp; ' + formatSpan(province, '#000') + '<br> 订单总量: ' + formatSpan(orderCount, '#000') + '<span style="color: #000;">笔</span>'
        // return '省份: ' + formatSpan(province, '#000') + '<br> 订单总量: ' + formatSpan(orderCount, '#000') + '笔';
        // return '省份: ' + formatSpan(province, '#FF0000') + '<br> 订单总量: ' + formatSpan(orderCount, '#00FF00') + '笔';
        }
      },

      /* legend: {
        data: [date]
    },*/
      grid: {
        left: '4%',
        right: '4%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          textStyle: {
            // color: '#fff',
            fontWeight: '80'
          }
        }
      },
      yAxis: {
        type: 'category',
        data: ['湖北', '湖南', '河南', '安徽', '浙江', '山东', '广东'],
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 0,
          margin: 10,
          inside: false,
          textStyle: {
            // color: 'red',
            fontWeight: '500'
          }
        }
      },
      series: [{
        type: 'bar',
        label: {
          normal: {
            show: false,
            // formatter: '{c}',
            formatter: function(v) {
              var val = v.data
              if (val === 0) {
                return ''
              }
              return val
            },
            color: '#fff'
          }
        },
        data: [22, 33, 44, 55, 66, 77, 88]
      }]
    }
    str.setOption(optionss)
    // 地图
    const maps = document.querySelector('#map')
    console.log(res)
    const chinaMaps = echarts.init(maps)
    const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
    const points = [
      { value: [116.405285, 39.904989], itemStyle: { color: '#FFFA00' }},
      { value: [113.54909, 22.198951], itemStyle: { color: '#00EEFF' }},
      { value: [91.132212, 29.660361], itemStyle: { color: '#00EEFF' }},
      { value: [126.642464, 45.756967], itemStyle: { color: '#00EEFF' }},
      { value: [87.617733, 43.792818], itemStyle: { color: '#00EEFF' }}
    ]
    var mapoption = {
      geo: {
        map: 'china',
        roam: false, // 是否开启放大缩小/拖拽功能
        zoom: 1.2, // 缩放比列
        layoutCenter: ['50%', '50%'], // 地图中心点位置
        layoutSize: '100%',
        label: {
          show: true,
          color: '#fff'
        },
        itemStyle: {
          areaColor: '#12235c',
          borderColor: '#2ab8ff',
          borderWidth: 0.5,
          shadowColor: 'rgba(0,54,255, 0.4)',
          shadowBlur: 100
        },
        emphasis: { // 区域激活时的样式
          itemStyle: {
            areaColor: '#02102b'
          },
          label: {
            color: '#fff'
          }
        }
      },
      series: [ // 添加迁移线数据
        {
          type: 'lines',
          data: [ // 配置多个点的数据
            {
              coords: [
                [116.405285, 39.904989],
                [113.54909, 22.198951]
              ]
            },
            {
              coords: [
                [116.405285, 39.904989],
                [91.132212, 29.660361]
              ]
            },
            {
              coords: [
                [116.405285, 39.904989],
                [126.642464, 45.756967]
              ]
            },
            {
              coords: [
                [116.405285, 39.904989],
                [87.617733, 43.792818]
              ]
            }
          ],
          effect: {
            show: true,
            period: 5, // 箭头指向速度，值越小速度越快
            trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
            // symbol: 'arrow', //箭头图标
            symbol: planePath,
            // 'image://',
            symbolSize: 15 // 图标大小
          },
          lineStyle: {
            color: '#00eaff',
            width: 1, // 尾迹线条宽度
            opacity: 0.7, // 尾迹线条透明度
            curveness: 0.3 // 尾迹线条曲直度
          }
        },
        { // 带有涟漪特效动画的散点（气泡）图
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel: 1,
          rippleEffect: {
            number: 3, // 波纹的数量。
            period: 5, // 动画的周期，秒数。
            scale: 17, // 动画中波纹的最大缩放比例。
            brushType: 'fill' // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          },
          symbolSize: 2,
          data: points
        }
      ]
    }
    chinaMaps.setOption(mapoption)
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.header{
    display: flex;
    justify-content: space-between;
    .tooltip{
      width: 20px;
      height: 20px;
      vertical-align:top;
    }
    .time{
      color:#818693;
      &::before{
        content: "";
        display: inline-block;
        width: 15px;
        height: 14px;
        background-image: url();
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 8px;
      }
    }
    .Totalorderstime {
      font-size: 14px;
      color: #818693;
    }

    .Orderdistributiontime {
      font-size: 14px;
      color: #818693;
    }

  }
  .Orderdistributiontype{
      font-size: 14px;
      color: #818693;
      margin-top: 0;
    }

.ball-chart-box{
  display: flex;
  .myChart{
    flex: 1;
  }
  }
  .bottom-label{
    position: absolute;
    top: 235px;
    display: flex;
    width: 100%;
    padding-right: 20px;
    justify-content: space-around;
    .item{
      flex: 25%;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      .num1{
        color:#da5f41;
      }
      .num2{
        color: #f8c45c;
      }
      .num3{
        color:#f69c41
      }
      .num4{
        color:#eade81
      }
    }
  }
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
.tasking{
  .bottom-label{
    padding-right: 35px;
  }
}
.box-card {
  position: relative;
  padding:0;
  margin-bottom: 20px;
  p {
    margin: 0;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
  }
  .Totalorderstype{
      font-size: 14px;
      color: #818693;
      margin-top: 0;
    }
  .useFeaturelist{
    display: flex;
    justify-content: space-between;
    .item{
      // display: flex;
    width: 15.15%;
    height: 116px;
    background: #fafafb;
    border-radius: 10px;
    cursor: pointer;
    &:hover p{
      color: #e15536;
    }
      img{
      width: 40px;
      height: 40px;
      margin: 0 auto;
      display: block;
      margin-top: 20px;
       }
      p{
      font-size: 16px;
      color: #20232a;
      font-weight: 700;
      text-align: center;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    .left-content{
      flex: 50%;
      border-right: 1px solid #ebeef5;
      padding-left: 10px;
      .name{
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 13px;
      }
      .address ,
      .duty-people {
        font-size: 14px;
        color:#818693
      }
      .address{
        margin-bottom: 8px;
      }
      .duty-people{
        margin-bottom: 23px;
      }
    }
    .right-content{
      flex: 50%;
      display: flex;
      width: 300px;
      flex-wrap: wrap;
      justify-content: center;
      .item{
        width: 150px;
        flex: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .label{
          font-size: 14px;
          margin-bottom: 10px;
        }
        .num {
          font-size: 32px;
          font-weight: 700;
          color: #e15536;
          cursor: pointer;
        }
      }
    }
  }

}
.right-info{
  .row-bg{
    display: flex;
    margin-top: 16px;
    padding-left: 10px;
    .el-col{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .label{
    font-size: 14px;
    color: #20232a;
    margin-bottom: 21px;
    }
    .value{
    font-size: 36px;
    color: #20232a;
    font-weight: 700;
    margin-bottom: 24px;
    }
    .bottom {
    font-size: 14px;
    color: #818693;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    padding-left: 9px;
    &::after{
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url();
    background-repeat: no-repeat;
    background-size: contain
    }
    }
  }
}
.order-static {
  display: flex;
  justify-content: space-evenly;
  margin-top: 38px;
  .item{
    .num{
      font-size: 28px;
      color: #e15536;
      font-weight: 700;
      text-align: center;
      margin-bottom: 5px;
    }
    .label{
      font-size: 12px;
      color: #818693;
      text-align: center;
    }
  }
}
.transport-task{
  .header {
    // align-items: baseline;
    margin-bottom: 20px;
    p{
      margin-bottom: 0;
    }
  }
  .search-more{
    font-size: 14px;
    color: #818693;
    display: flex;
    align-items: center;
    cursor: pointer;
    &::after{
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background-image: url();
      background-repeat: no-repeat;
      background-size: contain;
      margin-left: 8px;
      }
    }
  }

</style>
